<template>
  <el-tag 
    :type="tagType" 
    :effect="effect"
    :size="size"
    :class="['release-status-tag', `release-${status}`]"
  >
    <el-icon v-if="showIcon" class="status-icon">
      <component :is="statusIcon" />
    </el-icon>
    {{ statusText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Clock, 
  Loading, 
  SuccessFilled, 
  RefreshLeft
} from '@element-plus/icons-vue'
import type { ReleaseStatus } from '@/api/version'

interface Props {
  status: ReleaseStatus
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

// 发布状态配置映射
const statusConfig = {
  unreleased: {
    text: '未发布',
    type: 'info',
    icon: Clock
  },
  releasing: {
    text: '发布中',
    type: 'warning',
    icon: Loading
  },
  released: {
    text: '已发布',
    type: 'success',
    icon: SuccessFilled
  },
  rolled_back: {
    text: '已回滚',
    type: 'danger',
    icon: RefreshLeft
  }
}

// 计算属性
const statusText = computed(() => {
  return statusConfig[props.status]?.text || props.status
})

const tagType = computed(() => {
  return statusConfig[props.status]?.type || 'info'
})

const statusIcon = computed(() => {
  return statusConfig[props.status]?.icon || Clock
})
</script>

<style scoped>
.release-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-icon {
  font-size: 12px;
}

/* 发布中状态的动画效果 */
.release-releasing .status-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 特殊状态样式 */
.release-unreleased {
  --el-tag-text-color: #909399;
  --el-tag-bg-color: #f4f4f5;
  --el-tag-border-color: #e4e7ed;
}

.release-releasing {
  --el-tag-text-color: #e6a23c;
  --el-tag-bg-color: #fdf6ec;
  --el-tag-border-color: #f5dab1;
}

.release-released {
  --el-tag-text-color: #67c23a;
  --el-tag-bg-color: #f0f9ff;
  --el-tag-border-color: #c2e7b0;
}

.release-rolled_back {
  --el-tag-text-color: #f56c6c;
  --el-tag-bg-color: #fef0f0;
  --el-tag-border-color: #fbc4c4;
}
</style>